<template>
  <div>
    <table class="table table-bordered vertical-align-middle text-center approve-table">
      <colgroup>
        <col width="16%" />
        <col width="34%" />
        <col width="16%" />
        <col width="34%" />
      </colgroup>
      <tbody>
        <tr>
          <td colspan="4" class="text-center border-0">
            <h5 class="m-0">放款审批申请表</h5>
          </td>
        </tr>
        <tr>
          <td>客户名称</td>
          <td>{{ related.customer_name }}</td>
          <td>客户类型</td>
          <td>{{ orgClassName }}</td>
        </tr>
        <tr>
          <td>担保额度</td>
          <td>{{ entrustContract.reply_funds || '' }}万元</td>
          <td>担保期限</td>
          <td>{{ entrustContract.load_years }}月</td>
        </tr>
        <tr>
          <td>担保费率</td>
          <td>{{ entrustContract.gua_rate || '-' }}%</td>
          <td>贷款利率</td>
          <td>{{ entrustContract.load_rate || '-' }}%</td>
        </tr>
        <tr>
          <td>放款机构</td>
          <td>{{ entrustContract.bank_name || '-' }}</td>
          <td>本次放款金额</td>
          <td>{{ entrustContract.reply_funds || '-' }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    related: Object,
  },
  data() {
    return {}
  },

  computed: {
    ...mapGetters(['entrustContract', 'enumOrgClassObj']),
    // 客户类型
    orgClassName() {
      return this.enumOrgClassObj[this.related.org_class] || ''
    },
    // 合同期间
    loadPeriod() {
      return (
        (this.entrustContract.load_date || '- ') +
        '至' +
        (this.entrustContract.load_end_date || ' -')
      )
    },
  },

  created() {
    this.$store.dispatch('getEnumOrgClass')
  },
  methods: {},
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
